<template>
  <div>
    <movie-header></movie-header>

    <div class="contentMain">
      <Card>
        <h1>{{ newsDetail.articleTitle }}</h1>
        <div class="viewNum">{{ newsDetail.articleTime }}</div>
        <div class="contentText">{{ newsDetail.articleContext }}</div>
      </Card>

      <div>
        <comment> </comment>
      </div>
    </div>

    <movie-footer></movie-footer>
  </div>
</template>

<script>
import MovieHeader from '../../../components/MovieHeader'
import MovieFooter from '../../../components/MovieFooter'
import Comment from '../../../components/Comment'

export default {
  components: {
    MovieHeader,
    MovieFooter,
    Comment
  },
  data() {
    return {
      id: this.$route.query.id,
      newsDetail: {
        articleTitle: '',
        articleTime: '',
        articleContext: ''
      }
    }
  },
  created() {
    this.getNewsList()
  },
  methods: {
    // 文章列表
    getNewsList() {
      this.$http
        .post(
          'http://localhost:3000/articleDetail',
          { articleId: this.id },
          { emulateJSON: true }
        )
        .then(({ body }) => {
          const { data, status } = body
          if (status === 200) {
            this.newsDetail = data
            this.newsDetail.articleTime = new Date(
              parseInt(this.newsDetail.articleTime)
            )
              .toLocaleString()
              .replace(/:\d{1,2}$/, '')
          }
        })
    }
  }
}
</script>

<style lang="css" scoped>
.headerImg {
  height: 200px;
}
.contentMain {
  /* margin-top: 68px; */
  padding: 0 8px;
  margin-bottom: 68px;
}
.btnPosition {
  width: 100%;
  text-align: center;
}
.supportBtn {
  width: 10%;
  height: 30px;
}
.viewNum {
  font-size: 10px;
}
</style>
